<!--
 * @Date: 2022-08-25 14:05:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-10-11 10:23:14
 * @FilePath: \aster-flowable-vue\src\views\workflow\components\process\drawer\triggerDrawer.vue
-->
<template>
  <el-drawer
    :append-to-body="true"
    v-model="visible"
    :show-close="false"
    :size="550"
    :before-close="saveTrigger"
  >
    <template #header>
      <el-input
        v-if="editFlag"
        v-model="triggerConfig.value.nodeName"
        placeholder="请输入节点名称"
        @blur="editFlag = false"
      />
      <div class="custom-title" v-else>
        <div>{{ _nodeName }}</div>
        <i class="iconfont icon-bianji icon-primary" @click="editFlag = true"></i>
      </div>
    </template>
    <el-form
      ref="nodeFormRef"
      style="max-width: 600px"
      :rules="[]"
      label-width="auto"
      label-position="top"
      status-icon
    >
      <el-form-item :label="t('workflow.process.nodeId')" prop="id">
        <el-input readonly v-model="triggerConfig.id" />
      </el-form-item>
      <!-- 新增的 el-select 组件 -->
      <el-form-item label="触发器配置">
        <el-radio-group v-model="triggerConfig.value.triggerProperty.triggerType">
          <el-radio value="javaClass">
            <el-tooltip placement="top">
              <template #content>
                <div style="max-width: 280px">
                  全路径类名，该类必须实现JavaDelegate、FlowableBehavior或FutureJavaDelegate接口,如：vip.aster.xxx.MyJavaDelegate
                </div>
              </template>
              <span>
                java类
                <el-icon><QuestionFilled /></el-icon>
              </span>
            </el-tooltip>
          </el-radio>
          <el-radio value="delegateExpression">
            代理表达式
            <el-tooltip placement="top">
              <template #content>
                <div style="max-width: 280px">
                  实现JavaDelegate接口的Bean，在表达式调用之前需初始化到流程变量中，或者注册在Spring容器中，如：${myJavaDelegate}
                </div>
              </template>
              <span>
                java类
                <el-icon><QuestionFilled /></el-icon>
              </span>
            </el-tooltip>
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <!--  一段时间后设置  -->
      <el-form-item label-position="left" label-width="auto" label="监听器">
        <el-input
          v-model="triggerConfig.value.triggerProperty.triggerValue"
          placeholder="java类或代理表达式"
        >
          <!-- 可以用来增加校验 -->
          <!--        <template #append>
          <el-button :icon="Search" />
        </template>-->
        </el-input>
      </el-form-item>
      <el-divider />
      <el-form-item label="注入字段">
        <!-- 字段表格 -->
        <el-table
          :data="triggerConfig.value.triggerProperty.extensionElements"
          border
          :show-header="true"
          :header-cell-style="{ background: '#eef1f6' }"
        >
          <el-table-column prop="fieldName" label="字段名称">
            <template #default="{ row }">
              <el-input
                v-model="row.fieldName"
                placeholder="请输入字段名称"
                size="small"
                style="width: 100%"
              />
            </template>
          </el-table-column>

          <el-table-column prop="fieldType" label="字段类型" width="120">
            <template #header>
              <el-tooltip content="仅支持字符串" placement="top">
                <span>
                  字段类型
                  <el-icon><QuestionFilled /></el-icon>
                </span>
              </el-tooltip>
            </template>
            <template #default="{ row }">
              <el-select v-model="row.fieldType" placeholder="请选择字段类型" size="small">
                <el-option label="字符串" value="string" />
              </el-select>
            </template>
          </el-table-column>

          <el-table-column prop="fieldValue" label="字段值">
            <template #default="{ row }">
              <el-input v-model="row.fieldValue" placeholder="请输入字段值" size="small" />
            </template>
          </el-table-column>

          <el-table-column label="操作" width="80">
            <template #default="{ $index }">
              <el-button link type="primary" size="small" @click="deleteField($index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 添加按钮 -->
        <div class="add-field-btn">
          <el-button type="primary" @click="addField" size="small" icon="Plus">
            添加字段
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script setup lang="ts">
  import { ref, computed, watch, onMounted } from 'vue';
  import { processStore } from '@/stores/modules/process';
  import { getFormFieldData } from '@/utils/process/process';
  import { QuestionFilled } from '@element-plus/icons-vue';
  import { useI18n } from 'vue-i18n';

  // 国际化
  const { t } = useI18n();
  let store = processStore();
  let { setTriggerConfig, setTrigger } = store;

  // 编辑状态
  const editFlag = ref<boolean>(false);

  // 当前审核节点的配置
  const triggerConfig = ref<any>({});

  // store中的审核节点配置
  const triggerConfig1 = computed(() => store.triggerConfig1);

  // 审核节点标题
  const _nodeName = computed(() => {
    const config = JSON.parse(JSON.stringify(store.triggerConfig1));
    if (config && config.value) {
      return config.value.nodeName;
    }
    return '';
  });

  // 监听审核节点配置
  watch(
    () => triggerConfig1.value,
    (val) => {
      console.info('初始化：', val);
      activeName.value = 'nodeProps';
      editFlag.value = false;
      triggerConfig.value = JSON.parse(JSON.stringify(val));
      triggerConfig.value.id = val.value.id;
      headerConfig.value = {
        required: false,
        edit: false,
        hidden: false,
        readonly: false,
      };
    },
  );

  let triggerDrawer = computed(() => store.triggerDrawer);

  let visible = computed({
    get() {
      return triggerDrawer.value;
    },
    set() {
      closeDrawer();
    },
  });

  // 选中的tab
  const activeName = ref<string>('nodeProps');

  // 表单属性表格配置
  const headerConfig = ref({});

  /**
   * 保存审批节点信息
   */
  const saveTrigger = () => {
    // 保存审批节点信息
    setTriggerConfig({
      value: JSON.parse(JSON.stringify(triggerConfig.value.value)),
      flag: true,
      id: triggerConfig1.value.value.id,
    });
    closeDrawer();
  };

  // 注入字段相关方法
  const addField = () => {
    if (!triggerConfig.value.value.triggerProperty.extensionElements) {
      triggerConfig.value.value.triggerProperty.extensionElements = [];
    }

    triggerConfig.value.value.triggerProperty.extensionElements.push({
      fieldName: '',
      fieldType: 'string',
      fieldValue: '',
    });
  };

  const deleteField = (index: number) => {
    triggerConfig.value.value.triggerProperty.extensionElements.splice(index, 1);
  };

  /**
   * 关闭抽屉
   */
  const closeDrawer = () => {
    setTrigger(false);
  };

  onMounted(() => {});
</script>
<style lang="scss">
  .custom-title {
    display: flex;
    justify-content: space-between;
  }
  .icon-bianji {
    cursor: pointer;
  }
</style>
